@charset "utf-8";
$blue:#0089ab;

@mixin icon($width,$height,$url) {
	content: '';
	width: $width;
	height: $height;
	display: inline-block;
	vertical-align: text-bottom;
	background: url('../images/'+$url) no-repeat center/$width $height;
}

@mixin transition($time) {
	-webkit-transition: all $time ease 0s;
	-moz-transition: all $time ease 0s;
	-ms-transition: all $time ease 0s;
	-o-transition: all $time ease 0s;
	transition: all $time ease 0s;
}

@mixin omit() {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@mixin ellipsis($num) {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $num;
}

.head_form{
	position: absolute;
	right: 0;
	top: 58px;
	display: none;
	height: 40px;
	z-index: 5;
	input{
		background-color: #eeeeee;
		width: 250px;
		height: 100%;
		vertical-align: top;
		 padding-left: 20px;
		color: #999999;
		&::placeholder{
			color: #999999;
			font-size: 14px;
		}
	}
	button{
		position: absolute;
		bottom: 0px;
		cursor: pointer;
		outline: none;
		right: 0px;
		width: 40px;
		height: 40px;
		border: 0;
		background:#000000 url('../images/search.png') no-repeat center;
	}
}


.header{
	height: 100px;
	width: 100%;
	margin: 0 auto;
	h1{
		float: left;
		width: 184px;
		height: 63px;
		margin-top: 18px;
		background: url('../images/logo01.jpg') no-repeat center/184px 63px;
		a{
			width: 184px;
			height: 63px;
			display: block;
			text-indent: -9999px;
		}
	}
	
	.mblNav{
		float: right;
		.Headernav{
			vertical-align: top;
			display: inline-block;
			line-height: 100px;
			margin-right: 67px;
			ul{
				li{
					float: left;
					width: 100px;
					text-align: center;
					a{
						color: #000000;
						font-size: 15px;
					}
					&:hover a{
						color: #0089ab;
					}
				}
			}
		}
		
		.header-icon{
			vertical-align: top;
			display: inline-block;
			position: relative;
			height: 16px;
			margin-top: 43px;
			line-height: 16px;
			.shop-car{
				float: left;
				height: 20px;
				background: url('../images/shop_car.png') no-repeat center/20px 16px;
				a{
					width: 20px;
					height: 20px;
					margin: 0 auto;
					display: block;
				}
			}
			.search-box{
				float: left;
				height: 20px;
				cursor: pointer;
				background: url('../images/search.png') no-repeat center/14px 14px;
			}
			.lang{
				float: left;
				height: 20px;
				cursor: pointer;
				text-align: center;
				font-size: 15px;
				line-height: 20px;
				padding-left: 50px;
				padding-right: 20px;
				background: url('../images/earth.png') no-repeat left 22px center/22px 22px;
				.list{
					width: 58px;
					top: 100%;
					right: 20px;
					position: absolute;
					display: none;
					a{
						display: block;
						@include transition(.5s);
						&:hover{
							transform: scale(1.2);
						}
					}
				}
				&::after{
					top: 6px;
					right: 0;
					position: absolute;
					@include icon(14px,8px,'icon36.png');
					vertical-align: middle;
				}
			}
			i{
				width: 58px;
				position: relative;
				&+i::before{
					content: '';
					left: 0;
					top: 4px;
					width: 1px;
					height: 12px;
					position: absolute;
					display: inline-block;
					vertical-align: middle;
					background-color: #cfcfcf;
				}
			}
		}
	}
	
	.header-btn{
		width: 45px;
		height: 40px;
		float: right;
		margin-top: 30px;
		background: url('../images/menu.png') no-repeat center/45px 40px;
	}
	
	.navToggle{
		margin-top: 20px;
		float: right;
		&.active .icon{
			width: 0;
		}
	}
	
	
}

.banner{
	
	img{width:100%;}
	.swiper-container{
		width: 100%;
		.swiper-slide{
			
		}
	}
	.swiper-pagination{
		.swiper-pagination-bullet{
			opacity: 1;
			width: 6px;
			height: 6px;
			border: 1px solid #FFFFFF;
			background-color: transparent;
		}
		.swiper-pagination-bullet-active{
			background-color: #FFFFFF;
		}
	}
}

.index-tit{
	text-align: center;
	margin: 65px auto 73px;
	h2{
		font-size: 24px;
		line-height: 48px;
		font-weight: bold;
	}
	p{
		color: #999999;
	}
}



.index-pro{
	
	
	
	.hd{
		position: relative;
		overflow: hidden;
		
		ul{
			display: flex;
			margin-top: 60px;
			li{
				text-align: center;
				flex-grow: 1;
				flex-shrink: 1;
				i.ico{
					width: 40px;
					height: 40px;
					line-height: 40px;
					position: relative;
					display: inline-block;
					img{
						vertical-align: middle;
					}
					img:nth-of-type(2){
						top: 50%;
						left: 50%;
						opacity: 0;
						position: absolute;
						transform: translate(-50%,-50%);
					}
				}
				
				&.on i{
					img{
						opacity: 0;
						&:nth-of-type(2){
							opacity: 1;
						}
					}
				}
				p{
					display: block;
					color: #333333;
					margin-top: 20px;
					@include omit();
					@include transition(.5s);
				}
				
				&:hover p{
					margin-top: 15px;
				}
				&.on{
					
					p{
						margin-top: 20px;
						&::after{
							content: '';
							width: 9px;
							height: 13px;
							display: block;
							margin: 12px auto;
							transition: all .5s;
							background: url('../images/icon03.png') repeat-y center 0/9px 13px;
						}
					}
					&:hover p::after{
						background: url('../images/icon03.png') repeat-y center 13px/9px 13px;
					}
				}
			}
		}
	}
	
	.swiper-container2{
		position: relative;
		overflow: hidden;
	}
	.bd{
		.swiper-slide{
			width: 450px;
			height: 260px;
			padding: 68px 25px 46px 47px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			background-color: #f8f8f8;
			
			.img-box{
				width: 50%;
				height: 160px;
				img{
					@include transition(.5s);
				}
			}
			&:hover .img-box img{
				transform: translate(-50%,-50%) scale(1.1);
			}
			
			
			.text-box{
				width: 50%;
				padding-left: 26px;
				display: table-cell;
				vertical-align: middle;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				h4{
					color: #000000;
					font-size: 16px;
					line-height: 16px;
					margin-bottom: 25px;
					max-width: 160px;
					@include  omit();
				}
				p{
					color: #666666;
					font-size: 14px;
					line-height: 24px;
					margin-bottom: 22px;
					@include  ellipsis(3);
				}
				span{
					color: #595959;
					font-size: 14px;
					transition: all .5s;
					&::after{
						content: '';
						width: 13px;
						height: 9px;
						margin-left: 37px;
						transition: all .5s;
						display: inline-block;
						background: url('../images/icon01.png') repeat-x center/13px 9px;
					}
				}
			}
			&:hover,&.on{
				span{
					color: #000000;
					&::after{
						background: url('../images/icon02.png') repeat-x 26px 0/13px 9px;
					}
				}
			}
		}
	}
}


.jhd .swiper-slide,
.parhd .swiper-slide{
	text-align: center;
	cursor: pointer;
	float: left;
	width: 20%;
	line-height: 60px;
	position: relative;
	border: 1px solid #dcdcdc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	+ .swiper-slide{
		border-left: 0;
	}
		
	&::after,&::before{
		content: "";
		width: 100%;
		height: 2px;
		background-color: $blue;
		position: absolute;
		bottom: 0;
		@include transition(.5s);
	}
	&:after{
		left: 0;
		width: 0;
	}
	&:before{
		right: 0;
		width: 0;
	}
	
	&:hover::after,
	&:hover::before{
		width: 100%;
	}
}

.index-pro-nav{
	
	.hd ul li{
		float: left;
		width: 20%;
	}
	
	.bd{
		ul li{
			display: flex;
			.slide{
				-webkit-flex: 1;
				flex: 1;
			}
		}
	}
	
	ul{
		text-align: center;
		li.ipro-navli{
			cursor: pointer;
			float: left;
			width: 20%;
			line-height: 60px;
			position: relative;
			border: 1px solid #dcdcdc;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			+li{
				border-left: 0;
			}
			
			a{
				color: #000000;
				font-size: 16px;
			}
		}
	}
}




.index-case{
	position: relative;
	h3{
		font-size: 36px;
	}
	.casebd{
		li{
			position: relative;
			img{
				width: 100%;
				object-fit: cover;
				min-height: 700px;
			}
			.text-box{
				background-color: rgba(38,38,38,.7);
				top: 135px;
				left: calc( 50% + 10% );
				position: absolute;
				width: 405px;
				height: 346px;
				color: #FFFFFF;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				padding: 76px 50px 0;
				
				h3{
					line-height: 48px;
					font-weight: bold;
					margin-bottom: 20px;
				}
				p{
					line-height: 30px;
				}
			}
		}
	}
	.casehd{
		left: 0;
		bottom: 0;
		position: absolute;
		width: 100%;
		height: 96px;
		z-index: 2;
		text-align: center;
		background: rgba(0,0,0,.55);
		.swiper-container{
			color: #FFFFFF;
			font-size: 14px;
			overflow: visible;
			.swiper-slide{
				margin-top: 8px;
				cursor: pointer;
				i{
					width: 40px;
					height: 40px;
					line-height: 40px;
					position: relative;
					display: inline-block;
					img{
						vertical-align: middle;
						&:nth-of-type(2){
							top: 50%;
							left: 50%;
							opacity: 0;
							position: absolute;
							transform: translate(-50%,-50%);
						}
					}
				}
				p{
					line-height: 48px;
					font-size: 16px;
				}
				&.on{
					margin-top: -85px;
					width: 200px;
					height: 180px;
					background-color: #0089ab;
					i{
						width: 60px;
						height: 60px;
						margin-top: 55px;
						background-color: #FFFFFF;
						border-radius: 50%;
						position: relative;
						img{
							opacity: 0;
							&:nth-of-type(2){
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
}

.index-about{
	.iabvideo{
		display: table-cell;
		position: relative;
		vertical-align: middle;
		.img{
			img{
				width: 100%;
				object-fit: cover;
			}
		}
		i{
			top: 50%;
			left: 50%;
			position: absolute;
			width: 91px;
			height: 91px;
			background: url('../images/icon04.png') no-repeat center/91px 91px;
			transform: translate(-50%,-50%);
		}
	}
	
	.index-about-list{
		display: table-cell;
		vertical-align: middle;
	}
}

.index-about-list{
	.index-about-box{
		padding-left: 10%;
		
		i{
			display: inline-block;
			width: 40px;
			height: 40px;
			text-align: center;
			vertical-align: text-bottom;
			position: relative;
			
			&::after{
				content: '';
				width: 23px;
				height: 23px;
				right: -60%;
				top: 50%;
				transform: translateY(-50%);
				position: absolute;
				display: inline-block;
				background: url('../images/icon09.png') no-repeat center/23px 23px;
			}
		}
		
		.text{
			position: relative;
			margin-left: 5%;
			display: inline-block;
			line-height: 24px;
			h4{
				font-size: 16px;
				color: #333333;
				@include omit();
			}
			p{
				color: #999999;
				@include omit();
			}
		}
		
		&:first-of-type{
			margin-top: 10px;
		}
		+.index-about-box{
			margin-top: 55px;
		}
	}
}

.tag-box{
	margin-top: 70px;
	padding: 40px;
	
	background-color: #f5f5f5;
	.text{
		display: block;
		width: 18%;
		margin-right: 5%;
		display: inline-block;
		vertical-align: middle;
		span{
			color: #000000;
			font-size: 16px;
			line-height: 36px;
			&::before{
				content: '';
				width: 70px;
				height: 1px;
				display: inline-block;
				vertical-align: middle;
				margin-right: 20px;
				background-color: #cccccc;
			}
		}
		p{
			font-size: 20px;
			line-height: 30px;
		}
	}
	
	.list-box{
		vertical-align: middle;
		width: 18%;
		display: inline-block;
		h4{
			color: $blue;
			font-size: 25px;
			font-weight: bold;
			text-align: center;
			i{
				font-size: 36px;
				vertical-align: top;
			}
		}
		p{
			color: #000000;
			font-size: 14px;
			text-align: center;
		}
		+ .list-box{
			border-left: 1px solid #d8d8d8;
		}
	}
}

.index-news{
	.inews{
		.inewspic{
			display: block;
			a.img{
				overflow: hidden;
				display: block;
				&:hover img{
					transform: scale(1);
				}
			}
			
			
			.inews-box{
				height: 100%;
				position: relative;
				img{
					height: 100%;
					transform: scale(1.1);
					object-fit: cover;
					@include transition(.5s);
				}
			}
			
			p{
				bottom: 0;
				color: #FFFFFF;
				position: absolute;
				width: 100%;
				text-indent: 10%;
				font-size: 18px;
				line-height: 48px;
				padding-top: 50px;
				background-image: linear-gradient(transparent, rgba(0,0,0,.58),rgba(0,0,0,.58));
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
		
		.index-news-list{
			float: left;
			padding-left: 80px;
			padding-right: 30px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			.index-news-box{
				padding: 25px 0;
				position: relative;
				@include transition(.5s);
				
				&::before{
					width: 140px;
					height: 2px;
					background-color: $blue;
					content: "";
					position: absolute;
					top: 0px;
					bottom: 0;
					opacity: 0;
					margin: auto;
					left: -80px;
					@include transition(.5s);
				}
				
				a{
					display: block;
				}
				
				.day{
					width: 20%;
					float: left;
					margin-top: 10px;
					display: inline-block;
					text-align: center;
					p{
						font-size: 36px;
						line-height: 42px;
						margin-bottom: 20px;
					}
					em{
						position: relative;
						color: #666666;
						font-size: 16px;
						line-height: 24px;
						
						&::after{
							transition: all .5s;
							top: -13px;
							left: 50%;
							transform: translateX(-50%);
							content: '';
							width: 40px;
							height: 1px;
							position: absolute;
							display: inline-block;
							background-color: #cccccc;
						}
					}
				}
				.text{
					width: 80%;
					float: left;
					padding-left: 5%;
					border-left: 1px solid #d0d0d0;
					position: relative;
					display: inline-block;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					
					h4{
						font-size: 18px;
						line-height: 48px;
						transition: all .5s;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					p{
						max-width: 440px;
						color: #999999;
						margin-bottom: 10px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
				
				
				// &:hover{
					
				// 	.day{
				// 		p,em{
				// 			color: $blue;
				// 		}
				// 	}
				// 	em{
				// 		&::after{
				// 			background-color: $blue;
				// 		}
				// 	}
				// 	.text{
				// 		border-left: 1px solid $blue;
				// 		h4{
				// 			color: $blue;
				// 		}
				// 	}
				// }
			}
		}
	}
}

a.more{
	display: block;
	width: 204px;
	font-size: 16px;
	margin: 63px auto;
	text-align: center;
	line-height: 48px;
	border: 1px solid #000000;
	@include transition(.5s);
	&:hover{
		color: #999999;
	}
	&:active{
		color: #333333;
	}
}

.footer{
	background-color: #f2f2f2;
	.footer1{
		font-size: 16px;
		line-height: 74px;
		border-bottom: 1px solid #e5e5e5;
		position: relative;
		a.search{
			cursor: pointer;
			width: 20px;
			height: 20px;
			float: right;
			margin-top: 30px;
			position: relative;
			display: inline-block;
			background: url('../images/icon10.png') no-repeat center/20px 20px;
		}
		.head_form{
			top: -40px;
			right: 0;
			position: absolute;
		}
	}
	
	.footer2{
		.footer-nav{
			.fnav-box{
				width: 20%;
				float: left;
				font-size: 16px;
				vertical-align: top;
				display: inline-block;
				margin-top: 46px;
				h3{
					margin-bottom: 10px;
					a{
						font-size: 16px;
						font-weight: bold;
						@include transition(.5s);
						&:hover{
							color: #777777;
						}
					}
				}
				li{
					a{
						color: #666666;
						font-size: 14px;
						line-height: 40px;
						@include transition(.5s);
						&:hover{
							color: #AAAAAA;
						}
					}
				}
			}
		}
	}
	
	.footer3{
		padding: 20px 0;
		border-top: 1px solid #e5e5e5;
		.friend-link{
			float: left;
			line-height: 40px;
			a{
				font-size: 14px;
				+ a::before{
					margin: 0 5px;
					content: '|';
					display: inline-block;
				}
			}
			
		}
		.bshare-custom{
			float: right;
			a{
				width: 40px;
				height: 40px;
				&:nth-of-type(1){
					background: url(../images/icon_wx.png) no-repeat;
				}
				&:nth-of-type(2){
					background: url(../images/icon_in.png) no-repeat;
				}
			}
		}
	}
	
	
	.copy{
		color: #666666;
		font-size: 14px;
		line-height: 58px;
		text-align: center;
		background-color: #e6e6e6;
	}
}

.nav-box{
	line-height: 90px;
	background: url('../images/icon11.jpg') repeat-x;
	border-bottom: 1px solid #e8e8e8;
	ul{
		
		li{
			float: left;
			a{
				font-size: 14px;
			}
		}
	}
	
	.break{
		float: left;
		li{
			a{
				color: #666666;
			}
			+ li::before{
				margin: 0 5px;
				content: '>';
				display: inline-block;
			}
			&:hover,&.on{
				a{
					color: $blue;
				}
			}
		}
	}
	.publicnav{
		float: right;
		li{
			a{
				color: #999999;
				padding: 0 20px;
			}
			
			border-bottom: 1px solid transparent;
			&:hover,&.on{
				border-bottom: 1px solid $blue;
				a{
					color: $blue;
				}
			}
		}
	}
}

.news-swiper{
	padding: 45px 0;
	background-color: #f9f9f9;
	.swiper-slide{
		position: relative;
		.text{
			left: 0;
			bottom: 0;
			position: absolute;
			height: 100px;
			width: 100%;
			background-color: rgba(0,0,0,.58);
			color: #FFFFFF;
			text-indent: 30px;
			h2{
				font-size: 24px;
				line-height: 64px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			p{
				font-size: 16px;
				&::after{
					@include icon(20px,17px,'icon34.png');
					margin-left: 35px;
				}
			}
		}
	}
	.swiper-button-next{
		width: 29px;
		height: 39px;
		background: url('../images/icon-r1.png') no-repeat center/contain;
	}
	.swiper-button-prev{
		width: 29px;
		height: 39px;
		background: url('../images/icon-l1.png') no-repeat center/contain;
	}
}

.search-box2{
	background-color: #f9f9f9;
	padding-bottom: 50px;
	h2{
		color: #1c1c1c;
		font-weight: bold;
	}
	.year{
		font-size: 16px;
		line-height: 42px;
		color: #d0d0d0;
		span{
			color: #333333;
			font-weight: bold;
		}
		> a{
			margin-left: 15px;
			color: #333333;
			&::after{
				width: 8px;
				content: '';
				height: 14px;
				margin-left: 10px;
				display: inline-block;
				background: url('../images/icon13.png');
				vertical-align: text-bottom;
			}
		}
		ul{
			color: #333333;
			vertical-align: bottom;
			display: inline-block;
			li{
				float: left;
				padding: 0 8px;
				&:first-of-type{
					color: #d20000;
				}
			}
		}
		&::after{
			content: '';
			height: 1px;
			width: 420px;
			display: block;
			background-color: #dcdcdc;
		}
		
	}
	.search{
		color: #999999;
		font-size: 14px;
		text-align: right;
		line-height: 36px;
		input{
			width: 350px;
			height: 40px;
			line-height: 40px;
			text-indent: 20px;
			border: 1px solid #bfbfbf;
		}
	}
}

.news{
	background-color: #F9F9FA;
	.list-box{
		margin: 0 -11px;
	}
	.list{
		float: left;
		padding: 0 11px;
		margin-bottom: 25px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		a{
			display: block;
			position: relative;
			border-radius: 10px;
			overflow: hidden;
			@include transition(.5s);
			&:hover,&.on{
				box-shadow: 6px 0 20px rgba(123,123,123,.15);
				h4{
					color: $blue;
				}
			}
		}
		.img-box{
			position: static;
			display: block;
			img{
				width: 100%;
				left: 0;
				top: 0;
				transform: translate(0,0) scale(1.1);
				position: static;
				@include transition(.5s);
			}
		}
		&:hover .img-box img{
			transform: translate(0,0) scale(1);
		}
		
		.text-box{
			height: 162px;
			position: relative;
			padding: 30px 20px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			background: #FFFFFF url('../images/icon15.png') no-repeat right 20px bottom 30px/20px 17px;
			h4{
				color: #000000;
				font-size: 16px;
				line-height: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				@include transition(.5s);
			}
			p{
				color: #999999;
				font-size: 14px;
				position: absolute;
				bottom: 30px;
			}
		}
	}
}

.pages{
	padding:50px 0;
	text-align:center;
	a{
		width: 36px;
		height:36px;
		background-color: #FFFFFF;
		display:inline-block;
		font-size:15px;
		line-height:35px;
		border-radius:50%;
		margin:0 6px;
		&:hover,&.on{
			color: #FFFFFF;
			background-color: $blue;
		}
		&.prev,&.next{
			font-family: '宋体';
			color: #666;
			background-color: transparent;
		}
	}
}

.newsv{
	padding-top:30px;
	padding-bottom:80px;
	.htit{
		text-align: center;
		margin-bottom: 50px;
		h3{
			padding:30px 0;
			font-size:30px;
			text-align: center;
		}
		i{
			color: #999999;
			font-size:14px;
			line-height: 18px;
			margin-right: 20px;
			&::before{
				margin-right: 10px;
				@include icon(18px,18px,'icon14.png');
			}
		}
		.bshare-custom{
			vertical-align: top;
			display: inline-block;
			a{
				background: none;
				padding-left: 0 !important;
				font-size:14px;
				color: #999999 !important;
				line-height: 18px;
				&::before{
					margin-right: 10px;
					@include icon(20px,17px,'icon15.png');
				}
			}
		}
		
		
	}
	.text-box{
		color:#666666;
		font-size:16px;
		line-height:30px;
	}
	p.next{
		margin-top: 30px;
		border-top: 1px solid #dfdfdf;
		border-bottom: 1px solid #dfdfdf;
		line-height:110px;
		a{
			font-size:15px;
			color: #666666;
			display:inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			&:hover{
				text-decoration: underline;
			}
			&.bl::before{
				display: inline-block;
				content: '';
				width: 0px;
				height: 0px;
				border-left: 0px solid #8f1105;
				border-right: 8px solid #8f1105;
				border-top: 5px solid transparent;
				border-bottom: 5px solid transparent;
				margin-right: 12px;
			}
			&.br::after{
				display: inline-block;
				content: '';
				width: 0px;
				height: 0px;
				margin-left: 12px;
				border-right: 0px solid #8f1105;
				border-left: 8px solid #8f1105;
				border-top: 5px solid transparent;
				border-bottom: 5px solid transparent;
			}
		}
	}
}

.ins-img,.ins_img{
	color:#FFFFFF;
	position: relative;
	img{
		width: 100%;
	}
	
	.ins-tit{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
	}
	h3{
		font-size: 48px;
	}
	span{
		font-size: 24px;
	}
	.container{
		top: 0;
		left: 50%;
		height: 100%;
		transform: translateX(-50%);
		position: absolute;
	}
	.text{
		left: 0;
		bottom: 10%;
		position: absolute;
		font-size: 14px;
		line-height: 24px;
	}
	
	
	
	.select-box{
		position: absolute;
		left: 50%;
		bottom: 36%;
		width: 50%;
		transform: translateX(-50%);
		select{
			margin: 0 2%;
			background: transparent url('../images/icon24.png') no-repeat right 21px center/14px 9px;
			width: 46%;
			height: 50px;
			float: left;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			line-height: 50px;
			border: 1px solid #FFFFFF;
			color: #FFFFFF;
			outline: none;
			text-indent: 43px;
			text-indent: 43px;
			option{
				color: #000000;
				text-indent: 43px;
				line-height: 50px;
			}
		}
	}
	
}

.honner{
	.btn{
		text-align: center;
		margin: 40px 0;
		a{
			width: 140px;
			line-height: 30px;
			display: inline-block;
			transition: all .5s;
			border: 1px solid #e5e5e5;
			margin: 0 8px;
			
			&.on,&:hover{
				color: #FFFFFF;
				border: 1px solid #d5ecf1;
				background-color: #0089ab;
			}
		}
	}
	.text-box{
		font-size: 14px;
		line-height: 24px;
		color: #666666;
		text-align: center;
	}
	.list-box{
		margin-top: 35px;
		.box{
			margin: 0 auto;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			a{
				display: block;
			}
			.list{
				width: 300px;
				margin: 0 auto 44px;
				background-color: #f8f8f8;
				overflow: hidden;
				p{
					color: #666666;
					line-height: 40px;
					text-align: center;
					@include omit();
				}
				.img-box{
					height: 210px;
					width: inherit;
					img{
						@include transition(.5s);
					}
				}
			}
			&:hover,&.on{
				.list{
					.img-box{
						img{
							transform: translate(-50%,-50%) scale(1.1,1.1);
						}
					}
				}
			}
		}
	}
}

.co-htit{
	text-align: center;
	font-family: '思源黑体 CN';
	margin: 60px 0;
	p{
		color: #7c7c7c;
		font-size: 14px;
		line-height: 30px;
		text-transform: uppercase;
	}
	h3{
		color: #000000;
		line-height: 36px;
		margin-top: 5px;
	}
}

.us{
	.text-box{
		color: #666666;
		font-size: 14px;
		line-height: 24px;
		max-width: 900px;
		margin: 0 auto;
	}
}

.contact {
	text-align: center;
	padding-top: 82px;
	padding-bottom: 74px;
	.list{
		margin: 0 auto;
		display: inline-block;
		.contact-box {
			display: inline-block;
			height: 188px;
			vertical-align: top;
			width: 308px;
			float: left;
			box-sizing: border-box;
			padding: 0 30px;
			.img{
				height: 40px;
				margin-top: 15px;
			}
			.text_box{
				h3 {
					margin: 25px 0;
					color: #333333;
					font-size: 15px;
				}
				p {
					color: #666666;
					font-size: 14px;
					line-height: 24px;
				}
			}
			&~.contact-box {
				border-left: 1px solid #ececec;
			}
		}
	}
}

.msg{
	form{
		.input-box{
			input{
				width: 30%;
				float: left;
				line-height: 52px;
				margin: 15px 0;
				text-indent: 24px;
				border: 1px solid #dfdfdf;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				&:not(:nth-of-type(3n+1)){
					margin-left: 5%;
				}
				&:nth-of-type(5){
					width: 65%;
				}
			}
		}
		.reg-box{
			width: 590px;
			margin: 30px auto 80px;
			display: block;
			button,.img-box,.reg{
				margin-left: 40px;
				float: left;
				width: 170px;
				height: 50px;
				line-height: 50px;
				display: inline-block;
			}
			button{
				border: none;
				color: #FFFFFF;
				text-align: center;
				background-color: $blue;
				outline: none;
				cursor: pointer;
				@include  transition(.5s);
				&:hover{
					background-color: #00789a;
				}
			}
			.img-box{
				
				cursor: pointer;
				margin-left: 0;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.reg{
				line-height: 52px;
				text-indent: 24px;
				border: 1px solid #dfdfdf;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				background-color: #f9f9f9;
			}
		}
	}
}

.ab-tit{
	padding: 90px 0 60px;
	text-align: center;
	h3{
		color: #000000;
		line-height: 60px;
		margin-bottom: 10px;
		font: bold 30px '微软雅黑';
	}
	p{
		color: #666666;
		i{
			color: $blue;
		}
	}
}

.ab1{
	margin: 90px auto 70px ;
	> .img{
		width: 44%;
		float: left;
		display: inline-block;
		vertical-align: middle;
		float: none;
		display: table-cell;
		
	}
	> .text{
		
		width: 52%;
		padding-left: 4%;
		vertical-align: top;
		float: left;
		display: inline-block;
		float: none;
		display: table-cell;
		
		h3{
			color: #000000;
			margin: 20px auto 40px;
			line-height: 60px;
			font: bold 30px '微软雅黑';
		}
		.swiper-container{
			width: 100%;
			height: 300px;
			.swiper-slide {
				font-size: 18px;
				height: auto;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				.text-box{
					width: 95%;
					font-size: 14px;
					color: #666666;
					line-height: 24px;
				}
			}
		}
		.ab-icon{
			margin-top: 20px;
			.list{
				float: left;
				width: 33%;
				display: inline-block;
				text-align: center;
				font-size: 14px;
				line-height: 24px;
				.img{
					width: 100%;
					height: 32px;
				}
				.text{
					margin-top: 10px;
					h4{
						color: #000000;
					}
					p{
						color: #666666;
					}
				}
			}
		}
	}
}

.ab2{
	text-align: center;
	padding-bottom: 80px;
	background:url('../images/about_03.jpg') no-repeat center/cover;
	img{
		margin: 0 25px;
	}
}

.ab3{
	position: relative;
	
	img{
		width: 50%;
		float: left;
	}
	
}

.ab4{
	margin-bottom: 40px;
	background: url('../images/ab4-lg-bg.jpg') no-repeat center bottom/100% 580px;
	.main1{
		height: 580px;
		.box1{
			padding-top: 150px;
			text-align: center;
			h4{
				font-size: 36px;
				color: #333333;
			}
			.text-box{
				margin: 35px auto;
				font-size: 14px;
				line-height: 30px;
				color: #666666;
			}
			
			a{
				display: block;
				margin: 0 auto;
				width: 130px;
				height: 30px;
				color: #FFFFFF;
				text-align: center;
				line-height: 30px;
				background-color: $blue;
				@include transition(.5s);
				&:hover{
					background-color: $blue - #111111;
				}
				&:active{
					background-color: $blue;
				}
			}
		}
	}
}

.first-select{
	padding-top:240px;
	h3{
		text-align:center;
		font-weight:normal;
		color:#fff;
		font-size:24px;
		margin:0;
		padding-bottom:76px;
		span{
			display:block;
			color:#b5b5b5;
			font-size:16px;
			padding-top:15px;
		}
	}
	
	dl{
		width:637px;
		margin:0 auto;
		font-size:16px;
		dt{
			padding-left:56px;
			background:url('../images/booking_select_type.png') no-repeat left bottom;
			span{
				display:block;
				border-bottom:1px solid #999;
				line-height:50px;
				color:#999;
				background:url('../images/booking_select_type_a.png') no-repeat 98% center;
				cursor:pointer;
			}
		}
		dd{
			display:none;
			padding-left:56px;
			padding-top:10px;
		}
	}
}

.third-select{
	h2{
		line-height: 72px;
		color: #FFFFFF;
		padding: 95px 0 70px;
	}
}

.down{
	.list{
		float: left;
		width: 663px;
		margin-bottom: 33px;
		height: 109px;
		position: relative;
		background: rgba(255,255,255,.4) url('../images/down-01.png') no-repeat right 31px center/26px 26px;
		&:nth-of-type(2n){
			margin-left: 74px;
		}
		&::after{
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			display: inline-block;
			width: 0;
			height: 4px;
			background-color: $blue;
			@include transition(.5s);
		}
		&:hover{
			&::after{
				width: 100%;
			}
		}
		
		
		a{
			display: block;
			width: 100%;
			height: 100%;
			padding: 0 100px 0 30px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			
			h3,i{
				display: inline-block;
				line-height: 109px;
				color: #FFFFFF;
			}
			
			i{
				float: right;
			}
		}
	}
}

.year_swiper{
	position: relative;
	&::before{
		width: 100%;
		height: 2px;
		left: 0;
		bottom: 7px;
		display: inline-block;
		position: absolute;
		content: '';
		background-color: #FFFFFF;
	}
	.main{
		max-width: 1350px;
	}
	.swiper-container{
		max-width: 80%;
		margin-left: unset;
	}
	.swiper-slide{
		width: 20%;
		p{
			font-size: 16px;
			height: 65px;
			line-height: 44px;
			color: #FFFFFF;
			cursor: pointer;
			text-align: center;
			position: relative;
			&::after{
				position: absolute;
				bottom: 0px;
				left: 48%;
				content: '';
				display: block;
				width: 14px;
				height: 14px;
				@include icon(14px,14px,'icon22.png');
			}
		}
		&.swiper-slide-active p{
			color: #FFFFFF;
			font-size: 30px;
			line-height: 30px;
			&::after{
				position: absolute;
				bottom: 0px;
				left: 42%;
				content: '';
				display: block;
				background-color: $blue;
				border-radius: 50%;
				width: 14px;
				height: 14px;
				background-image: none;
			}
		}
	}
	.btn-box{
		width: 110px;
		display: inline-block;
		position: absolute;
		right: 0;
		top: 0;
		.swiper-button-prev,.swiper-button-next{
			top: 0;
			width: 34px;
			margin-top: 0;
		}
		.swiper-button-prev{
			background: url('../images/icon-l2.png') no-repeat center/34px 14px;
			&:hover{
				transform: rotate(180deg);
				background: url('../images/icon-l3.png') no-repeat center/34px 14px;
			}
		}
		.swiper-button-next{
			transform: rotate(180deg);
			background: url('../images/icon-l2.png') no-repeat center/34px 14px;
			&:hover{
				transform: rotate(0);
				background: url('../images/icon-l3.png') no-repeat center/34px 14px;
			}
		}
	}
}



.bd_swiper{
	overflow: hidden;
	max-width: 1300px;
	padding-top: 170px;
	margin: 0 auto 65px;
	> .swiper-container{
		// width: 500%;
		.swiper-slide{
			// height: 400px;
			.his_box{
				display: block;
				// position: absolute;
				// left: 50%;
				// top: 50%;
				// transform: translate(-50%,-50%);
				// width: 100%;
				.img-box{
					width: 650px;
					height: 400px;
					display: table-cell;
					vertical-align: middle;
					text-align: center;
					img{
						width: 100%;
						height: 100%;
						position: relative;
						top: 0;
						left: 0;
						transform: translate(0,0);
						object-fit: contain;
					}
				}
				.text-box{
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					color: #000;
					display: table-cell;
					vertical-align: top;
					// background: #FFFFFF url('../images/coures-03.png') no-repeat right 70px top 55px;
					width: 50%;
					h3{
						color: $blue;
						margin-bottom: 25px;
					}
					p{
						text-align: left;
						color: #333333;
					}
					img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
		}
	}
	h3{
		font-size: 36px;
	}
}

// .bd_swiper{
// 	overflow: hidden;
// 	max-width: 1300px;
// 	padding-top: 170px;
// 	margin: 0 auto 65px;
// 	> .swiper-container{
// 		// width: 500%;
// 		.swiper-slide{
// 			height: 400px;
// 			.his_box{
// 				display: block;
// 				position: absolute;
// 				left: 50%;
// 				top: 50%;
// 				transform: translate(-50%,-50%);
// 				width: 100%;
// 				.img-box{
// 					width: 650px;
// 					height: 400px;
// 					display: table-cell;
// 					vertical-align: middle;
// 					text-align: center;
// 					img{
// 						width: 100%;
// 						height: 100%;
// 						object-fit: cover;
// 					}
// 				}
// 				.text-box{
// 					-webkit-box-sizing: border-box;
// 					-moz-box-sizing: border-box;
// 					box-sizing: border-box;
// 					color: #000;
// 					display: table-cell;
// 					vertical-align: top;
// 					padding: 70px 60px;
// 					background: #FFFFFF url('../images/coures-03.png') no-repeat right 70px top 55px;
// 					width: 50%;
// 					h3{
// 						color: $blue;
// 						margin-bottom: 25px;
// 					}
// 					p{
// 						text-align: left;
// 						color: #333333;
// 					}
// 				}
// 			}
// 		}
// 	}
// 	h3{
// 		font-size: 36px;
// 	}
// }

.major h3,.platform h3,.news2 h3{
	color: #000000;
	margin: 0 auto 70px;
	line-height: 60px;
	text-align: center;
	font:  30px '微软雅黑';
}

.rdc{
	margin: 90px auto 70px ;
	h3{
		color: #000000;
		margin: 20px auto 40px;
		line-height: 60px;
		font:  30px '微软雅黑';
	}
	> .swiper-container{
		// width: 700px;
		float: left;
		.img-box{
			width: inherit;
			height: 550px;
			float: left;
			display: inline-block;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.btn{
			width: 120px;
			height: 50px;
			right: 0;
			bottom: 0;
			position: absolute;
			background-color: #FFFFFF;
			z-index: 2;
			.swiper-button-prev,.swiper-button-next{
				width: 60px;
				height: 50px;
				margin: 0;
				&:hover{
					background-color: $blue;
				}
			}
			.swiper-button-prev{
				top: 0;
				left: 0;
				background: url('../images/icon-l5.png') no-repeat center/18px 27px;
				&:hover{
					background-image: url('../images/icon-l4.png');
				}
			}
			.swiper-button-next{
				top: 0;
				right: 0;
				background: url('../images/icon-r5.png') no-repeat center/18px 27px;
				&:hover{
					background-image: url('../images/icon-r4.png');
				}
			}
		}
	}
	> .text{
		width: 48%;
		margin-left: 2%;
		vertical-align: top;
		display: inline-block;
		.swiper-container{
			width: 100%;
			height: auto;
			.swiper-slide {
				font-size: 18px;
				height: auto;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				.text-box{
					width: 98%;
					font-size: 14px;
					color: #666666;
					line-height: 24px;
				}
			}
		}
		.env-icon{
			margin-top: 20px;
			.list{
				float: left;
				width: 33%;
				display: inline-block;
				text-align: center;
				font-size: 14px;
				line-height: 24px;
				.img{
					width: 100%;
					height: 70px;
				}
				.text{
					color: #666666;
					margin-top: 10px;
					font-size: 14px;
					line-height: 24px;
				}
			}
		}
	}
}

.major{
	background-color: #f3f3f3;
	padding: 125px 0 80px;
	.list{
		width: 322px;
		margin: 0 auto;
		border-radius: 50%;
		.img-box{
			width: 322px;
			height: 276px;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 10px 10px 0 0;
			}
		}
		.text-box{
			height: 195px;
			text-align: center;
			background-color: #dadada;
			border-radius: 0 0 10px 10px;
			
			h4{
				font-size: 24px;
				line-height: 48px;
				padding-top: 10px;
				margin-bottom: 5px;
			}
			p{
				font-size: 14px;
				line-height: 24px;
				color: #666666;
			}
		}
	}
	.btn-box{
		width: 120px;
		height: 50px;
		margin: 70px auto 0;
		position: relative;
	}
	.swiper-button-prev,.swiper-button-next {
	    width: 47px;
	    height: 47px;
	    margin: 0;
	}
	
	.swiper-button-prev{
		top: 0;
		left: 0;
		background: url('../images/icon-l6.png') no-repeat center;
	}
	.swiper-button-next{
		top: 0;
		right: 0;
		background: url('../images/icon-r6.png') no-repeat center;
	}
}

.platform{
	padding: 105px 0;
	background: url('../images/env_10.jpg') no-repeat center/cover;
	h3{
		color: #FFFFFF;
	}
	.list{
		vertical-align: top;
		color: #FFFFFF;
		width: 250px;
		margin: 0 auto 30px;
		.img{
			text-align: center;
			position: relative;
			img:nth-of-type(2){
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				position: absolute;
				z-index: -1;
			}
		}
		.text-box{
			margin-top: 30px;
			h4{
				font-size: 24px;
				text-align: center;
				margin-bottom: 15px;
			}
		}
		
		&.on,&:hover{
			.img{
				img:nth-of-type(2){
					z-index: 1;
				}
			}
		}
	}
}

.news2{
	padding-top: 80px;
	.list{
		max-width: 420px;
		height: 484px;
		padding: 25px;
		margin: 0 auto 30px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px solid #e5e5e5;
		.text-box{
			margin-top: 35px;
			line-height: 30px;
			h4{
				font-size: 18px;
				margin-bottom: 5px;
				@include omit();
			}
			span{
				font-size: 12px;
				color: #999999;
			}
			p{
				margin-top: 13px;
				color: #666666;
				@include ellipsis(3);
			}
		}
		
		
		.img-box{
			width: 375px;
			height: 230px;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				@include transition(.5s);
			}
		}
		&:hover .img-box img{
			transform: translate(-50%,-50%) scale(1.1);
		}
	}
}

.case-nav-swiper{
	padding: 25px 0;
	background-color: #f8f8f8;
	.swiper-slide{
		-webkit-flex-shrink: 1;
		flex-shrink:1;
		text-align: center;
		cursor: pointer;
		i.ico{
			width: 34px;
			height: 34px;
			line-height: 34px;
			position: relative;
			display: inline-block;
			img{
				vertical-align: middle;
			}
		}
		p{
			display: block;
			line-height: 36px;
			color: #666666;
		}
		&::after{
			content: '';
			width: 22px;
			height: 4px;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			display: inline-block;
			background-color: transparent;
			@include transition(.5s);
		}
		&:hover,&.active{
			&::after{
				background-color: $blue;
			}
		}
	}
}

.case-main{
	margin-top: 66px;
	.list-box{
		margin: 0 -40px;
	}
	.list{
		float: left;
		padding: 0 40px;
		margin-bottom: 64px;
		position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		a{
			display: block;
			position: relative;
			overflow: hidden;
			
			.img_box{
				width: 415px;
				height: 265px;
				overflow: hidden;
				position: relative;
				background-color: #000000;
				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
					transform: scale(1.1);
					@include transition(.5s);
				}
				.mask{
					width: 31px;
					height: 31px;
					background: url('../images/icon35.png') no-repeat center/31px 31px;
					position: absolute;
					opacity: 0;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					@include transition(.5s);
				}
			}
			&:hover{
				img{
					opacity: .75;
					transform: scale(1);
				}
				.mask{
					opacity: 1;
				}
			}
		}
		
		&:hover{
			.text::after{
				width: 100%;
			}
		}
	}
	
	
	.text{
		padding: 23px 0;
		background: url('../images/icon23.png') no-repeat right center/23px 13px;
		border-bottom: 1px solid #e4e4e4;
		p{
			color: #666666;
			margin-bottom: 10px;
		}
		span{
			color: #c8c8c8;
		}
		
		&::after{
			content: '';
			left: 0;
			bottom: 0;
			height: 1px;
			width: 0;
			position: absolute;
			display: inline-block;
			background-color: $blue;
			@include transition(.5s);
		}
	}
}

.casev{
	.casev-tit{
		display : flex ; align-items : center ; bottom : 2px !important ; overflow : hidden;
		margin: 60px auto 30px;
		.box{
			width: 190px;
			padding: 0 20px;
			text-align: center;
			white-space: nowrap;
			border-left: 1px solid #e3e3e3;
			border-right: 1px solid #e3e3e3;
		}
		
		&::before { content : "" ; display : inline-block ; width : 800px ; height : 1px ; background-color : #CCCCCC ; vertical-align : middle }
		&::after { content : "" ; display : inline-block ; width : 800px ; height : 1px ; background-color : #CCCCCC ;vertical-align : middle }
		h3{
			color: #666666;
			font-size: 18px;
		}
		p{
			font-size: 12px;
			color: #999999;
		}
	}
	.case-share{
		display: block;
		text-align: right;
		margin-bottom: 30px;
		font-size: 14px;
		img{
			vertical-align: middle;
			margin: 0 10px;
		}
		.bshare-custom{
			display: inline-block;
			a{
				width: 28px;
				height: 28px;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 28px 28px;
				$icon-list: icon25 icon26 icon27 icon28;
				@each $icon in $icon-list {
					$index: index($icon-list, $icon);
					&:nth-of-type(#{$index}) {
						background-image: url("../images/"+$icon+".png");;
					}
				}
				// &:nth-of-type(1){
				// 	background-image: url('../images/icon25.png');
				// }
				// &:nth-of-type(2){
				// 	background-image: url('../images/icon26.png');
				// }
				// &:nth-of-type(3){
				// 	background-image: url('../images/icon27.png');
				// }
				// &:nth-of-type(4){
				// 	background-image: url('../images/icon28.png');
				// }
			}
		}
	}
	
	.text{
		color: #777777;
		margin-top: 60px;
		margin-bottom: 40px;
		font-size: 14px;
		line-height: 24px;
	}
	
}

.casevswiper{
	width: 100%;
	background-color: #f0f0f0;
	.swiper-slide{
		padding: 65px 125px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		.img-box{
			height: 35vw;
			max-height: 565px;
			width: inherit;
		}
	}
	.swiper-button-prev,.swiper-button-next {
		width: 37px;
		height: 51px;
	}
	.swiper-button-prev{
		left: 37px;
		background: url('../images/icon-l7.png') no-repeat center/contain;
	}
	.swiper-button-next{
		right: 37px;
		background: url('../images/icon-r7.png') no-repeat center/contain;
	}
	
}

.recommend{
	margin-bottom: 65px;
	.box{
		display : flex ;
		align-items : center ;
		bottom : 2px !important ;
		overflow : hidden;
		margin-bottom: 50px;
		
		&::before {
			content : "" ;
			display : inline-block ;
			width : 800px ;
			height : 1px ;
			margin-right: 16px;
			background-color : #CCCCCC ;
			vertical-align : middle;
		}
		&::after {
			content : "" ;
			display : inline-block ;
			width : 800px ;
			height : 1px ;
			margin-left: 16px;
			background-color : #CCCCCC ;
			vertical-align : middle;
		}
		h4{
			width: 165px;
			padding: 0 50px;
			height: 45px;
			font-size: 16px;
			border: 1px solid #aaaaaa;
			line-height: 45px;
			text-align: center;
			white-space: nowrap;
		}
	}
	
	.list{
		margin-bottom: 20px;
		position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		a{
			display: block;
			position: relative;
			overflow: hidden;
		}
		.img_box{
			width: 100%;
			height: 260px;
			padding: 20px;
			border: 1px solid #e5e5e5;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			img{
				
			}
		}
		p{
			font-size: 14px;
			line-height: 48px;
			text-align: center;
		}
	}
	.btn-box{
		display: none;
	}
}

.pro{
	background-color: #f6f6f6;
	.pro-nav{
		width: 20%;
		float: left;
		display: inline-block;
		background-color: #FFFFFF;
		> h3{
			font-size: 16px;
			line-height: 90px;
			border-bottom: 1px solid #ececec;
			&::before{
				@include icon(27px,27px,'pro-01.png');
				margin-left: 10px;
				margin-right: 24px;
			}
		}
		.input-box{
			width: 90%;
			margin: 23px  auto;
			position: relative;
			input{
				text-indent: 30px;
				line-height: 40px;
				width: 100%;
				background-color: #eeeeee;
			}
			button{
				top: 0;
				right: 0;
				width: 38px;
				height: 40px;
				border: none;
				background: $blue url('../images/pro-02.png') no-repeat center/14px 14px;
				position: absolute;
			}
		}
		> ul{
			padding: 0 15px;
			> li{
				padding: 25px 0;
				>a{
					display: block;
					width: 100%;
					font-size: 16px;
					line-height: 35px;
					background: url('../images/pro-03.png') no-repeat right 10px center/10px 2px;
				}
				ul{
					display: none;
					margin-top: 20px;
					li{
						font-size: 14px;
						line-height: 40px;
						a{
							width: 100%;
							display: block;
							text-indent: 30px;
							background: url('../images/icon31.png') no-repeat left center;
							@include omit();
						}
						&:hover,&.on{
							a{
								color: $blue;
								background: url('../images/icon30.png') no-repeat left center;
							}
						}
					}
					
				}
				+ li{
					border-top: 1px solid #e7e7e7;
				}
			}
		}
	}
	
	.pro-list{
		float: right;
		width: 80%;
		padding-left: 37px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin-top: 54px;
		vertical-align: top;
		display: inline-block;
		.list-box{
			margin-left: -11px;
			margin-right: -11px;
		}
		.list{
			float: left;
			padding: 0 11px;
			margin-bottom: 32px;
			width: 50%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			a{
				display: block;
				float: left;
				width: 100%;
				padding: 70px 47px 70px 25px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				background-color: #FFFFFF;
					
			}
			
			// &:nth-of-type(2n){
			// 	margin-left: 23px;
			// }
			
			.img-box{
				width: 40%;
				height: 139px;
				img{
					@include transition(.5s);
				}
			}
			&:hover .img-box img{
				transform: translate(-50%,-50%) scale(1.1,1.1);
			}
			
			.text-box{
				width: 60%;
				padding-left: 26px;
				display: table-cell;
				vertical-align: middle;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				h4{
					color: #000000;
					font-size: 16px;
					line-height: 16px;
					margin-bottom: 25px;
					@include  omit();
				}
				p{
					color: #666666;
					font-size: 14px;
					line-height: 24px;
					margin-bottom: 22px;
					@include  ellipsis(2);
				}
				span{
					color: #595959;
					font-size: 14px;
					transition: all .5s;
					&::after{
						content: '';
						width: 13px;
						height: 9px;
						margin-left: 37px;
						transition: all .5s;
						display: inline-block;
						background: url('../images/icon01.png') repeat-x center/13px 9px;
					}
				}
			}
			&:hover,&.on{
				span{
					color: #000000;
					&::after{
						background: url('../images/icon02.png') repeat-x 26px 0/13px 9px;
					}
				}
			}
		}
	}
}

.prov{
	padding: 90px 0 70px ;
	background-color: #f5f5f5;
	h3{
		color: #000000;
		padding-bottom: 36px;
		border-bottom: 1px solid #b3b3b3;
		line-height: 60px;
		font:  30px '微软雅黑';
	}
	
	.container > .swiper-container{
		float: left;
		.img-box{
			width: inherit;
			height: 500px;
			float: left;
			display: inline-block;
			img{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
	.text_box{
		padding-left: 5%;
		vertical-align: top;
		display: inline-block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		.swiper-container{
			margin-top: 25px;
			margin-bottom: 25px;
			width: 100%;
			height: 200px;
			.swiper-slide {
				font-size: 18px;
				height: auto;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				.text{
					width: 98%;
					font-size: 14px;
					color: #696969;
					line-height: 36px;
				}
			}
		}
		> a{
			
			&:nth-of-type(1){
				background: $blue url('../images/icon32.png') no-repeat left 20% center/21px 21px;
			}
			&:nth-of-type(2){
				background: $blue url('../images/icon33.png') no-repeat left 20% center/23px 24px;
			}
			&:nth-of-type(3){
				background: $blue url('../images/icon37.png') no-repeat left 20% center/23px 24px;
			}
			display: inline-block;
			color: #FFFFFF;
			padding: 0 35px;
			text-indent: 25px;
			margin: 10px 5px 0;
			text-align: center;
			font-size: 16px;
			line-height: 44px;
			border-radius: 22px;
		}
		
	}
	
	
	.case-share{
		display: block;
		margin-top: 54px;
		font-size: 14px;
		img{
			vertical-align: middle;
			margin: 0 10px;
		}
		.bshare-custom{
			display: inline-block;
			a{
				width: 28px;
				height: 28px;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 28px 28px;
				
				&:nth-of-type(1){
					background-image: url('../images/icon25.png');
				}
				&:nth-of-type(2){
					background-image: url('../images/icon26.png');
				}
				&:nth-of-type(3){
					background-image: url('../images/icon27.png');
				}
				&:nth-of-type(4){
					background-image: url('../images/icon28.png');
				}
			}
		}
	}
}
.recommend.rec-prov,
.prov-data{
	h4{
		margin-top: 24px;
		font-size: 24px;
		line-height: 48px;
		text-indent: 20px;
		color: #000000;
		border-bottom: 1px solid #dadada;
	}
	
	h3{
		color: #000000;
		font-size: 24px;
		padding-top: 50px;
		line-height: 48px;
		border-bottom: 1px solid #dbdbdb;
		margin-bottom: 40px;
		position: relative;
		&::after{
			content: '';
			left: 0;
			bottom: 0;
			height: 1px;
			width: 140px;
			background-color: $blue;
			position: absolute;
		}
	}
}




.recommend.rec-prov{
	margin-bottom: 0;
	background-color: #f5f5f5;
	h3{
		color: #000000;
		font-size: 24px;
		padding-top: 50px;
		line-height: 48px;
		border-bottom: 1px solid #dbdbdb;
		margin-bottom: 40px;
		position: relative;
		&::after{
			content: '';
			left: 0;
			bottom: 0;
			height: 1px;
			width: 140px;
			background-color: $blue;
			position: absolute;
		}
	}
	.list .img_box{
		background-color: #FFFFFF;
	}
	
}

h2.jion{
	margin: 75px auto 45px;
	font:bold 30px '微软雅黑';
	text-align: center;
}

.jion-brand{
	text-align: center;
	margin-top: 85px;
	background: url('../images/about-bg.png') no-repeat top 15px center/1170px 368px;

	h2.jion{
		margin-bottom: 22px;
	}
	
	p{
		font-size: 16px;
		line-height: 30px;
		color: #666666;
		max-width: 1100px;
		margin: 0 auto;
	}
	
	.tag-box{
		margin-top: 0;
		background-color: transparent;
	}
	.swiper-wrapper{
		margin-bottom: 30px;
	}
	.swiper-container{
		margin: 40px 0 60px;
	}
	.swiper-slide .list{
		padding: 0 10px;
	}
}

.jion-lce{
	height: 680px;
	background: url('../images/jion_01.jpg') no-repeat center/cover;
	.container{
		position: relative;
		padding: 90px 0 125px;
	}
	
	h3{
		color: #333333;
		font-size: 24px;
		line-height: 48px;
		margin-bottom: 50px;
		span{
			color: #1590b0;
		}
	}
	.bl{
		padding-left: 65px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.text-box p{
		font-size: 16px;
		line-height: 30px;
		color: #666666;
	}
}

.jion-pro{
	.jbd{
		margin-top: 40px;
		img{
			width: 100%;
		}
		.box{
			z-index: 10;
			top: 50%;
			left: 50%;
			height: 50px;
			transform: translate(-50%,-50%);
			position: absolute;
			.swiper-button-next{
				width: 43px;
				height: 26px;
				background: url('../images/icon-r8.png') no-repeat center/contain;
			}
			.swiper-button-prev{
				width: 43px;
				height: 26px;
				background: url('../images/icon-l8.png') no-repeat center/contain;
			}
		}
	}
}


.jion-about{
	.iab{
		margin-top: 90px;
		margin-bottom: 110px;
	}
	.about-swiper{
		max-height: 400px;
		position: relative;
		img{
			width: 100%;
			object-fit: cover;
		}
		
		.btn{
			width: 120px;
			height: 50px;
			right: 0;
			bottom: 0;
			position: absolute;
			background-color: #FFFFFF;
			z-index: 2;
			.swiper-button-prev,.swiper-button-next{
				width: 60px;
				height: 50px;
				margin: 0;
				&:hover{
					background-color: $blue;
				}
			}
			.swiper-button-prev{
				top: 0;
				left: 0;
				background: url('../images/icon-l5.png') no-repeat center/18px 27px;
				&:hover{
					background-image: url('../images/icon-l4.png');
				}
			}
			.swiper-button-next{
				top: 0;
				right: 0;
				background: url('../images/icon-r5.png') no-repeat center/18px 27px;
				&:hover{
					background-image: url('../images/icon-r4.png');
				}
			}
		}
	}
}




.jion-sales{
	padding: 55px 0 150px;
	background: url('../images/jion_22.jpg') no-repeat center/cover;
	h2.jion{
		color: #FFFFFF;
		margin-bottom: 105px;
	}
	
	.sales-swiper{
		max-width: 1300px;
		.swiper-wrapper{
			.swiper-slide{
				padding: 0 10px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
		}
	}
	.list{
		height: 260px;
		max-width: 280px;
		border: 1px solid #FFFFFF;
		margin: 0 auto 30px;
		border-radius: 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 45px 20px;
		.img_box{
			width: 64px;
			height: 53px;
			margin: 0 auto;
			line-height: 53px;
			border: 1px solid #FFFFFF;
			border-radius: 8px;
			display: block;
			img{
				vertical-align: middle;
			}
		}
	}
	.text-box{
		text-align: center;
		color: #FFFFFF;
		h4{
			font-size: 18px;
			line-height: 30px;
			margin-top: 16px;
			margin-bottom: 28px;
		}
		p{
			font-size: 14px;
			line-height: 18px;
		}
	}
	
}

.jion-join.msg{
	padding: 40px 0 50px;
	.box img{
		width: 100%;
	}
	
	form{
		margin-top: 70px;
		button{
			background-color: #2f2f2f;
		}
	}
}




@media (max-width: 1680px){
	
	
	
	.index-pro .ipro_slide .parbd .sslide{
		.hd ul{
			margin-top: 50px;
		}
		
		.bd .swiper-container .swiper-slide{
			padding: 55px 35px;
		}
	}
	
		
	.pro{
		.pro-nav{
			 
			> ul > li{
				padding: 15px 0;
			}
		}
		.pro-list .list a{
			padding: 50px 35px;
		}
	}
	
	
	.news .box .list{
		width: 300px;
		
	}
	.ab1 > .text .swiper-container{
		height: 20vw;
	}
	
	.jion-sales{
		.swiper-slide{
			padding: 0 10px;
			.list{
				padding: 35px 20px;
			}
		}
	}
	
	.jion-lce .bl{
		padding-left: 0;
		padding-right: 65px;
	}
	
	.recommend .list .img_box{
		height: 240px;
	}
	
}


@media (max-width: 1600px){
	.index-about{
		.index-about-list{
			float: none;
		}
		.iabvideo{
			float: none;
		}
	}
}
	

@media (max-width: 1520px){
	
	.header .mblNav{
		
		.Headernav{
			margin-right: 30px;
			ul li{
				width: 85px;
			}
		}
		
		.header-icon{
			i{
				width: 50px;
			}
		}
	}
	
	
	
	.index-pro .ipro_slide .parbd .sslide{
		.hd ul{
			margin-top: 40px;
		}
		
		.bd .swiper-container .swiper-slide{
			padding: 45px 25px;
		}
	}
	
	.news .box .list{
		width: 280px;
		.img-box{
			height: 180px;
		}
	}
	
	.case-main .list a .img_box{
		height: 220px;
	}
	
	
	.honner .list-box .box .list{
		width: 250px;
	}
	
	.us .contact .contact-box{
		width: 25%;
	}
	
	.pro .pro-list .list a{
		padding: 40px 25px;
	}
	
	.index-news .inews{
		
		.index-news-list .index-news-box{
			padding: 15px 0;
		}
		.index-news-list{
			width: 55%;
			padding-left: 70px;
		}
		.inewspic{
			width: 45%;
			.inews-box img {
				height: 408px;
			}
			
		}
	}
	
	.jion-brand{
		margin-top: 70px;
	}
	
	.recommend .btn-box{
		display: block;
	}
	
	.recommend .list .img_box{
		height: 240px;
	}
	
}

@media (max-width:1200px) {
	.header{
		height: 90px;
		.mblNav{
			.Headernav{
				line-height: 90px;
				margin-right: 0;
				ul{
					li{
						width: 75px;
					}
				}
			}
			
			.header-icon{
				margin-top: 35px;
				i{
					width: 45px;
				}
				
				.lang {
					padding-left: 30px;
					background: url(../images/earth.png) no-repeat left 5px center/22px 22px;
				}
			}
		}
		
		
	}
	
	
	.jhd .swiper-slide,
	.parhd .swiper-slide{
		font-size: 14px;
		line-height: 50px;
	}
	
	.index-pro .ipro_slide {
		.parbd .sslide{
			.hd ul{
				margin-top: 30px;
			}
			.bd .swiper-container .swiper-slide{
				height: auto;
				padding: 35px 20px;
				.text-box{
					padding-left: 10px;
				}
			}
		}
	}
	
	
	
	.index-about-list{
		.index-about-box {
			padding-left: 1%;
			+ .index-about-box{
				margin-top: 20px;
			}
		}
	}
	
	.index-news .inews .index-news-list{
		padding-left: 30px;
	}
	
	.tag-box{
		padding: 20px;
		.text{
			width: 100%;
			display: block;
			margin-right: 0;
			margin-bottom: 20px;
		}
		.list-box{
			width: 25%;
			float: left;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
	}
	
	.nav-box{
		.pages{
			a{
				padding: 0 10px;
			}
		}
	}

	.news .list{
		margin-bottom: 20px;
	}
	.newsv p.next{
		margin-top: 20px;
		line-height: 50px;
		a{
			text-align: center;
		}
	} 
	
	
	.jion-brand{
		margin-top: 60px;
		.swiper-container {
		    margin: 30px 0 70px;
		}
	}
	
	.ins-img .select-box select{
		height: 40px;
		line-height: 40px;
	}
	
	
	.ab-tit {
		padding: 70px 0 45px;
		text-align: center;
	}
	
	
	.ab1{
		margin: 60px auto 50px;
		> .img{
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		> .text{
			vertical-align: middle;
			h3{
				font-size: 28px;
			}
			
			.swiper-container{
				height: 30vw;
				.swiper-slide{
					.text-box{
						width: 100%;
					}
				}
			}
		}
	}
	
	.ab2{
		img{
			width: 46%;
			margin: 0 1%;
		}
	}
	
	.ab4{
		background: none;
		.main1{
			height: auto;
			.box1{
				padding: 50px 0;
				background: url('../images/ab4-md-bg.jpg') no-repeat center/contain;
			}
			.box2{
				text-align: center;
				background-color: #f5f5f5;
			}
		}
	}
	
	
	.booking-content .from-bg{
		height: auto;
		padding-bottom: 80px;
	}
	.first-select{
		padding: 40vw 0;
		dl {
			width: 60%;
		}
	}
	.second-select {
	    padding: 10vw 0;
	}
	
	
	.bd_swiper{
		padding-top: 10vw;
	}
	
	.major{
		padding: 60px 0;
		.list{
			width: 310px;
		}
		.btn-box{
			margin-top: 40px;
		}
	}
	
	.platform {
		padding: 80px 0;
	}
	
	.news2{
		padding-top: 60px;
	}
	
	.case-main{
		.list-box{
			margin: 0 -10px;
		}
		.list{
			padding: 0 10px;
			margin-bottom: 30px;
			
			a .img_box{
				height: 180px;
			}
		}
	}
	
	
	
	.casevswiper .swiper-slide{
		padding: 40px 100px;
	}
	
	.pro .pro-nav{
		
		> h3{
			line-height: 60px;
			&::before{
				margin-left: 5px;
				margin-right: 10px;
			}
		}
		.input-box{
			margin: 10px auto;
			input{
				text-indent:5px;
				line-height: 30px;
				
			}
			button{
				width: 30px;
				height: 30px;
			}
		}
		> ul > li{
			padding: 5px 0;
		}
	}
	
	
	.prov .case-share {
	    margin-top: 20px;
	}
	
		
	.news-swiper .swiper-slide .text{
		height: 80px;
		p{
			
		}
		h2{
			font-size: 22px;
			line-height: 48px;
		}
	}
	
	.jion-sales {
	    padding: 50px 0 120px;
	}
	
	.jion-sales h2.jion{
		margin-bottom: 80px;
	}
	
	.jion-lce{
		height: auto;
		.container {
			padding: 70px 0 90px;
		}
		.bl{
			padding-right: 0;
		}
		h3{
			margin-bottom: 0;
		}
	}
	
}

@media (max-width:991px) {
	.header{
		position: relative;
		h1{
			width: 150px;
			background: url('../images/logo01.jpg') no-repeat center/contain;
			a{
				width: 150px;
			}
		}
		
		.navToggle{
			margin-top: 30px;
		}
		
		.mblNav{
		    left: 0;
			display: none;
		    top: 100%;
		    width: 100vw;
		    z-index: 9999;
		    position: absolute;
		    background-color: #FFFFFF;
			
			.Headernav{
				width: 100%;
				background-color: #FFFFFF;
				ul li{
					width: 100%;
					display: block;
					line-height: 75px;
					border-bottom:1px solid #E5E5E5;
					a{
						display: block;
						width: 100%;
						height: 100%;
						font-size: 18px;
					}
				}
			}
			
			.header-icon{
				width: 100%;
				height: auto;
				padding-bottom: 50px;
				border-bottom: 1px solid #000000;
				text-align: center;
				display: inline-block;
				.shop-car,.search-box{
					float: none;
					margin-top: 10px;
					vertical-align: top;
					display: inline-block;
				}
				.lang{
					float: none;
					margin-top: 5px;
					display: inline-block;
				}
				
				.search-box{
					display: none;
					&::after{
						content: none;
					}
				}
			}
			
			.head_form{
				top: 0;
				width: 300px;
				position: relative;
				vertical-align: top;
				display: inline-block;
			}
			
		}
		
	}
	
	
	.jion-brand{
		margin-top: 40px;
		.swiper-container {
		    margin: 20px 0 50px;
		}
	}
	
	.index-tit{
		margin: 55px auto 60px;
	}
	
	.jhd .swiper-slide,
	.parhd .swiper-slide{
		line-height: 40px;
	}
	
	
	.index-about{
		.iabvideo,
		.index-about-list{
			display: block;
			float: left;
		}
	}
	
	.index-news{
		.inews{
			.index-news-list,
			.inewspic{
				display: block;
				float: left;
				width: 100%;
				.inews-box{
					img{
						height: 40vw;
						width: 100%;
					}
					p{
						font-size: 16px;
						line-height: 42px;
						padding-top: 40px;
						text-indent: 10px;
					}
				}
			}
			.index-news-list{
				padding-left: 0;
				padding-right: 0;
				.index-news-box{
					margin-left: 0;
					.text p{
						max-width: unset;
						margin-bottom: 0;
					}
					&::before{
						content: none;
					}
				}
				
			}
		}
	}
	
	
	.index-case .casehd .swiper-container{
		overflow: hidden;
		.swiper-slide img{
			// min-height: 75vw;
		}
		.swiper-slide.swiper-slide-caseli-active{
			height: auto;
			margin-top: 0;
			i{
				width: 40px;
				height: 40px;
				margin-top: 8px;
			}
		}
	}
	
	
	.index-about-list .index-about-box{
		.text{
			float: left;
			padding-left: 5%;
			margin-left: 0;
			width: calc(100% - 40px);
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		 i{
			float: left; 
			&::after{
				content: none;
			}
		}
		 
	}
	
	.footer{
		.footer1 .head_form{
			position: relative;
			margin: 10px 0;
			top: unset;
			height: 50px;
			input{
				width: 100%;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				line-height: 50px;
			}
			button{
				width: 50px;
				height: 50px;
			}
		}
		
		.footer2 .footer-nav .fnav-box{
			display: block;
			margin-top: 0;
			width: 100%;
			h3{
				line-height: 70px;
				border-bottom: 1px solid #aaa;
			}
			ul{
				display: none;
			}
		}
		.footer3{
			border-top: none;
			h4{
				display: block;
				background: #514f4f;
				color: #c2c2c2;
				font-size: 16px;
				margin-right: 0;
				height: 70px;
				cursor: pointer;
				line-height: 70px;
				padding: 0 40px;
				margin-bottom: 15px;
			}
			.friend-link{
				float: none;
				display: none;
			}
			.bshare-custom{
				float: none;
				text-align: center;
				display: block;
			}
		}
	}
	
	.nav-box{
		.publicnav{
			float: right;
			position: relative;
			z-index: 999;
			margin: 15px 0;
			h3{width: 300px;color: #666666;font-size: 14px;text-indent: 33px;line-height: 64px;background-color: #e3e3e3;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					right: 20px;
					top: 50%;
					transform: translateY(-50%);
					display: inline-block;
					border-width: 10px;
					border-bottom-width: 0;
					border-style: solid;
					border-color: #000000 transparent transparent transparent;
				}
			}
			button{top: 0;right: 0;border: 0;color:#FFFFFF;width: 150px;outline: none;line-height: 62px;font-size: 14px;position: absolute;background-color: #454545;}
			ul{
				display: none;position: absolute;background-color: #FFFFFF;
				li{
					width: 300px;color: #666666;font-size: 14px;line-height: 64px;background-color: #e3e3e3;margin-top: 2px;
					a{width: 100%;height: 100%;display: inline-block;text-indent: 33px;padding: 0;}
				}
			}
		}
	}
	
	.index-about-list{
		// margin-top: 20px;
		.index-about-box{
			width: 50%;
			float: left;
			display: inline-block;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			&:first-of-type{
				margin-top: 20px;
			}
		}
	}
	
	.search-box2 .search{
		margin-top: 20px;
		text-align: left;
	}
	
	.nav-box{
		line-height: 80px;
		.publicnav{
			h3{
				line-height: 54px;
			}
			button{
				line-height: 52px;
			}
			ul li{
				line-height: 54px;
			}
		}
	}
	
	.news .list {
	    padding: 0 5px;
	}
	
	.newsv .htit h3{
		font-size: 20px;
	}
	
	.honner .list-box .box .list {
		width: 350px;
	}
	
	.us .contact .contact-box{
		width: 50%;
		margin-bottom: 20px;
		& ~ .contact-box{
			border-left: none;
		}
		&:nth-of-type(2n) {
		    border-left: 1px solid #ececec;
		}
	}
	
	.pages{
		padding: 30px 0;
	}
	
	.ins-img .select-box select{
		height: 35px;
		line-height: 35px;
	}
	
	.booking-content .from-bg.bg3{
		height: auto;
	}
	
	// .bd_swiper{
	// 	padding-top: 5vw;
	// 	> .swiper-container{
	// 		.swiper-slide{
	// 			height: 700px;
	// 			.his_box{
	// 				.img-box{
	// 					height: 30vw;
	// 					width: inherit;
	// 					display: inline-block;
						
	// 				}
	// 				.text-box{
	// 					display: inline-block;
	// 					width: 100%;
	// 				}
	// 			}
	// 		}
	// 	}
	// }
	
	.bd_swiper{
		padding-top: 5vw;
		> .swiper-container{
			.swiper-slide{
				// height: 700px;
				.his_box{
					.img-box{
						width: 100%;
						height: auto;
						display: inline-block;
						img{
							object-fit: cover;
						}
					}
					.text-box{
						display: inline-block;
						width: 100%;
						img{
							object-fit: cover;
						}
					}
				}
			}
		}
	}
	
	.rdc > .text{
		margin-left: 0;
		width: 100%;
		h3{
			margin-bottom: 20px;
			font-size: 26px;
		}
		.swiper-container{
			height: auto;
			.swiper-slide .text-box{
				width: 100%;
			}
		}
	}
	
	.rdc{
		margin: 40px auto;
		.swiper-container .img-box{
			height: 50vw;
		}
	}
	
	.major{
		padding: 60px 0;
	}
	
	.major h3, .platform h3, .news2 h3{
		font-size: 26px;
		margin-bottom: 50px;
	}
	
	.platform {
		padding: 60px 0;
	}
	
	.news2{
		padding-top: 50px;
	}
	
	.case-main{
		.list-box{
			margin: 0 -20px;
		}
		.list{
			padding: 0 20px;
			a .img_box{
				height: 265px;
			}
		}
		
	}
	
	
	.pro{
		
		.pro-nav{
			width: 100%;
			margin-top: 20px;
			> h3{
				line-height: 45px;
				&::before{
					margin-left: 15px;
				}
			}
		}
		.pro-list{
			width: 100%;
			padding-left: 0;
			margin-top: 30px;
			.list{
				margin-bottom: 15px;
			}
		}
	}
	
	.prov{
		padding-top: 60px;
		padding-bottom: 15px;
		.text_box{
			margin-top: 20px;
			padding-left: 0;
			.swiper-container{
				height: auto;
			}
		}
		.container > .swiper-container .img-box {
		    width: inherit;
		    height: 50vw;
		}
		
	}
	
	.prov h3{
		font-size: 26px;
		padding-bottom: 25px;
		line-height: 45px;
	}
	
	
	.brand{
		margin-top: 60px;
		.swiper-container {
		    margin: 35px 0 75px;
		}
	}
	
	.tag-box{
		margin-top: 50px;
	}
	
	
	
	.news-swiper .swiper-slide{
		img{
			height: 35vw;
		}
		.text{
			height: 70px;
			p{
				font-size: 12px;
			}
			h2{
				font-size: 20px;
				line-height: 40px;
			}
		}
	}
	
	
	.ab-tit {
	    padding: 55px 0 40px;
	    text-align: center;
	}
	
	.ab1{
		margin: 45px auto 40px;
		> .img{
			float: left;
			display: block;
			width: 100%;
			height: 50vw;
		}
		.text{
			float: left;
			display: block;
			width: 100%;
			padding-left: 0;
			h3{
				font-size: 26px;
			}
			.swiper-container{
				height: auto;
			}
		}
	}
	
	.ab4 .main1 .box1 h4{
		font-size: 28px;
	}
	
	
	
	.casevswiper .swiper-slide{
		padding: 30px 60px;
	}
	.jion-sales {
	    padding: 45px 0 100px;
	}
	
	
	
	.jion-lce{
		height: auto;
		background: url('../images/jion_01.jpg') no-repeat center/cover;
		padding-bottom: 20px;
		.container {
		    padding: 60px 0 70px;
		}
		.bl{
			top: unset;
			left: unset;
			position: relative;
		}
		.text-box{
			padding-top: 20px;
			margin-bottom: 30px;
			h3{
				margin-bottom: 20px;
			}
		}
	}
	.jion-about{
		.about-swiper {
			height: 45vw;
		}
		.iab{
			margin-top: 60px;
			margin-bottom: 80px;
		}
	}
	
	
	.year_swiper .swiper-slide{
		width: 25%;
	}
	
	.recommend .list .img_box{
		height: 200px;
	}
	
}

@media (max-width:768px) {
	.header{
		height: 45px;
		.navToggle{
			margin-top: 7px;
		}
		
		h1{
			height: 35px;
			width: 102px;
			margin-top: 5px;
		}
		.mblNav{
			
			.Headernav ul{
				width: 83.33%;
				margin: 0 auto;
				max-width: 767px;
				li{
					line-height: 45px;
					border-bottom:1px solid #E5E5E5;
					a{
						font-size: 14px;
					}
				}
			}
			
			.head_form{
				width: 40%;
			}
			
			.header-icon{
				margin-top: 20px;
				padding-bottom: 20px;
				
				input{
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					width: 100%;
				}
			}
		}
	}
	
	.index-tit{
		margin: 35px auto 40px;
		h2{
			font-size: 20px;
		}
	}
	.swiper-button-next, .swiper-button-prev{
		width: 15px;
		height: 25px;
		background-size: 15px 25px;
	}
	
	.jhd .swiper-slide,
	.parhd .swiper-slide{
		line-height: 32px;
		font-size: 12px;
	}
	
	.index-pro .ipro_slide{
		.parbd .sslide{
			.hd ul li{
				flex-shrink: 0;
			}
			.hd ul li.on p::after{
				margin: 6px auto;
			}
			.bd .swiper-container .swiper-slide{
				height: auto;
				padding: 15px 5px;
				.text-box h4{
					width: 35vw;
				}
			}
		}
	}
	
	
	
	.jion-brand{
		.swiper-container {
			margin: 15px 0 40px;
		}
		
	}
	
	.honner .list-box .box .list {
	    width: 40vw;
	}
	
	
	.index-pro-nav{
		position: relative;
		h3{
			color: #333333;
			line-height: 32px;
			text-indent: 15px;
			background: url('../images/booking_select_type_a.png') no-repeat right 10px center;
			border: 1px solid #AAAAAA;
		}
		ul{
			z-index: 3;
			width: 100%;
			display: none;
			position: absolute;
			
			li.ipro-navli{
				width: 100%;
				text-align: left;
				text-indent: 15px;
				background-color: #FFFFFF;
				line-height: 32px;
				+ li{
					border-left: 1px solid #dcdcdc;
				}
			}
		}
	}
	
	.index-case .index-case-swiper .swiper-slide img{
		height: 80vw;
		min-height: auto;
	}
	
	.index-news .inews{
		.inewspic .inews-box p{
			font-size: 14px;
			line-height: 36px;
			padding-top: 40px;
			text-indent: 10px;
		}
		.index-news-list .index-news-box{
			padding: 10px 0;
			.day{
				margin-top: 5px;
				p{
					font-size: 28px;
					line-height: 36px;
					margin-bottom: 10px;
				}
				em{
					font-size: 12px;
					line-height: 18px;
				}
			}
		}
	}
	
	a.more{
		width: 180px;
		margin: 30px auto;
		font-size: 14px;
		line-height: 32px;
	}
	
	.co-htit{
		margin: 30px 0;
	}
	
	.contact{
		padding: 50px 0;
	}
	
	.footer{
		.footer1{
			line-height: 60px;
			.head_form{
				height: 40px;
				button{
					width: 40px;
					height: 40px;
				}
			}
			a.search{
				margin-top: 20px;
			}
		}
		.footer2 .footer-nav .fnav-box h3 {
			line-height: 50px;
		}
	}
	
	.nav-box{
		line-height: 60px;
		.publicnav {
		    margin: 10px 0;
			h3 {
			    line-height: 40px;
			}
			ul li {
			    line-height: 40px;
			}
		}
	}
	.jion-lce{
		height: auto;
		.text-box{
			left: 0;
			margin-right: 0;
			max-width: unset;
			h3{
				font-size: 16px;
				line-height: 36px;
				margin-bottom: 15px;
			}
		}
	}
	
	.ins-img{
		height: 50vw;
		img{
			height: 100%;
			object-fit: cover;
		}
	}
	.case-main{
		margin-top: 30px;
		.text p{
			margin-bottom: 0;
		}
		.list a .img_box{
			height: 25vw;
		}
	}
	
	.pages{
		padding: 20px 0;
	}
	
	.tag-box{
		margin-top: 40px;
		padding: 20px 0;
		.text{
			padding: 0 20px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		.list-box{
			width: 50%;
			margin-top: 20px;
			+ .list-box{
				border-left: 0;
			}
			
			&:nth-last-of-type(2n+1){
				border-left: 1px solid #d8d8d8;
			}
		}
	}
	
	.news .list{
		width: 50%;
	}
	
	.newsv .htit h3{
		font-size: 18px;
	}
	
	.nav-box{
		.publicnav{
			h3{
				width: 200px;
				text-indent: 20px;
				&::after{
					border-width: 8px;
					border-bottom-width: 0;
				}
			}
			button{
				width: 100px;
			}
			ul li{
				width: 200px;
				a{
					text-indent: 20px;
				}
			}
		}
	}
	
	.msg.container form{
		margin-top: 30px;
		
		 .input-box input{
			width: 100%;
			line-height: 42px;
			margin-left: 0;
			margin: 10px 0;
		}
		.reg-box{
			margin: 0 auto 30px;
			width: 100%;
			display: block;
			
			input{
				float: right;
				line-height: 42px;
				height: 42px;
				width: 40%;
				margin-left: 0;
				text-indent: 10px;
			}
			
			.img-box{
				width: 40%;
				height: 42px;
			}
			
			button{
				margin-left: 0;
				width: 100%;
				margin-top: 15px;
			}
		}
	}
	
	.first-select {
	    padding-top: 20vw;
	}
	
	.booking-content.same-margin-top .from-bg{
		height: auto;
	}
	
	.second-select{
		width: 80%;
		.input-list ul.row-2{
			&:last-of-type{
				margin-top: 0;
			}
			li{
				width: 100%;
				float: none;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				&:nth-child(2n){
					margin-right: 0;
				}
				
				.img{
					width: 100px;
					height: 30px;
				}
			}
		}
		.btn-box{
			text-align: center;
			float: none;
			display: block;
			padding: 50px 0;
			margin: 0 auto;
		}
	}
	
	// .bd_swiper{
	// 	margin-bottom: 0;
	// 	 > .swiper-container{
	// 		.swiper-slide{
	// 			height: 550px;
	// 			.his_box .text-box{
	// 				padding: 20px 10px;
	// 			}
	// 		}
	// 	}
	// }
	
	
	.bd_swiper{
		margin-bottom: 0;
		 > .swiper-container{
			.swiper-slide{
				// height: 550px;
				.his_box .text-box{
					// padding: 20px 10px;
				}
			}
		}
	}
	
	.ins-img .select-box{
		bottom: 10%;
		select{
			margin: 10px auto;
			display: block;
			float: none;
			width: 80%;
			height: 24px;
			text-indent: 20px;
			line-height: 24px;
		}
	}
	
	.year_swiper{
		.swiper-container{
			max-width: 100%;
		}
		.swiper-slide{
			width: 33.3%;
		}
	}
	
	
	.jion-pro .jbd .box{
		.swiper-button-prev,
		.swiper-button-next {
			width: 30px;
		}
	}
	
	.jion-pro .ipro-page-li .swiper-container .box{
		.swiper-button-next,
		.swiper-button-prev{
			width: 20px;
			height: 15px;
		}
	}
	
	.jion-about{
		.iab{
			margin: 10vw 0;
		}
		.about-swiper .btn {
			width: 60px;
			height: 25px;
			.swiper-button-prev,.swiper-button-next{
				width: 30px;
				height: 25px;
				background-size: 10px 15px;
			}
		}
	}
	
	
	.rdc{
		margin: 20px auto;
		.swiper-container .btn{
			width: 0;
			height: 0;
			position: static;
			.swiper-button-next,.swiper-button-prev{
				top: 50%;
				margin-top: -22px;
				&:hover{
					background-color: transparent;
				}
			}
		}
		.text h3{
			font-size: 22px;
		}
	}
	
	.major{
		padding: 50px 0;
		.list {
		    width: 280px;
			.text-box{
				height: 160px;
				h4 {
					line-height: 36px;
				}
			}
		}
		
	}
	
	.major h3, .platform h3, .news2 h3{
		font-size: 22px;
		margin-bottom: 30px;
	}
	
	.platform {
		padding: 40px 0;
	}
	
	.news2{
		padding-top: 40px;
	}
	
	.case-main{
		.list-box{
			margin: 0 -15px;
		}
		.text {
			padding: 10px 0;
		}
		.main{
			padding: 0 15px;
		}
		
		.list{
			width: 50%;
			padding: 0 15px;
		}
		
	}
	
	.casev{
		
		.text{
			margin-top: 30px;
			margin-bottom: 30px;
		}
		.casevswiper .swiper-slide {
			padding: 15px 30px;
		}
	
		.swiper-button-prev,.swiper-button-next {
			width: 20px;
			height: 30px;
		}
		.case-share{
			text-align: center;
		}
	}
	
	.pro .pro-list .list{
		
		a{
			padding: 30px 15px;
		}
		.img-box{
			width: 45%;
		}
		.text-box{
			width: 55%;
			padding-left: 10px;
			h4{
				margin-bottom: 15px;
			}
			p{
				margin-bottom: 10px;
			}
		}
	}
	
	
	.brand{
		margin-top: 45px;
		.swiper-container {
		    margin: 25px 0 55px;
		}
	}
	
	
	
	.news-swiper .swiper-slide{
		img{
			height: 45vw;
		}
		.text{
			height: 55px;
			p{
				font-size: 12px;
			}
			h2{
				font-size: 15px;
				line-height: 30px;
			}
		}
	}
	
	
	.ab-tit {
	    padding: 40px 0 30px;
	    text-align: center;
	}
	
	.ab1{
		margin: 20px auto;
		.text{
			
			.swiper-container .swiper-slide .text-box{
				font-size: 12px;
			}
			h3{
				font-size: 18px;
				margin: 10px auto 20px;
			}
		}
	}
	
	
	.news-swiper {
	    padding: 30px 0;
	}
	.search-box2{
		padding-bottom: 20px;
		h2{
			font-size: 16px;
		}
		.year{
			font-size: 12px;
			line-height: 28px;
		}
	}
	
	.ab4 .main1	.box1{
		h4{
			font-size: 18px;
		}
		.text-box{
			font-size: 12px;
		}
	}
	
	.jion-lce .container {
		padding: 40px 0;
		h3{
			line-height: 24px;
		}
	}
	
	
	.jion-sales {
	    padding: 35px 0 80px;
		h2.jion{
			margin-bottom: 40px;
		}
	}
	.news-swiper{
		.swiper-button-next,.swiper-button-prev{
			width: 15px;
			height: 20px;
		}
	}
	
	.search-box2 .year ul li {
	    float: left;
	    padding: 0 5px;
	}
	
	
	.case-nav-swiper .swiper-slide {
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
	}
	
}

@media (max-width:640px) {
	
	.header .mblNav{
		.header-icon .shop-car{
			margin-top: 5px;
		}
		.head_form{
			height: 30px;
			button{
				width: 30px;
				height: 30px;
			}
		}
	}
	
	
	.ab2{
		img{
			width: 100%;
		}
	}
	
	.index-tit{
		margin: 35px auto 40px;
		h2{
			font-size: 18px;
		}
	}
	
	.major{
		padding: 30px 0;
	}
	
	.major h3, .platform h3, .news2 h3{
		margin-bottom: 40px;
	}
	
	.platform {
		padding: 30px 0;
	}
	
	.casevswiper .swiper-slide {
		padding: 10px 15px;
	}
	
	.news2{
		padding-top: 40px;
	}
	
	.index-about-list .index-about-box{
		width: 100%;
		+ .index-about-box{
			margin-top: 10px;
		}
	}
	
	.pro .pro-list .list-box{
		margin-left: -5px;
		margin-right: -5px;
		.list{
			padding: 0 5px;
			a{
				
			}
		}
	}
	
}

@media (max-width: 500px){
	.header .mblNav .head_form{
		display: block;
		margin: 10px auto;
		width: 60%;
	}
	
	
	.index-tit{
		margin: 30px auto 20px;
	}
	.news .box .list{
		width: 100vw;
	}
	
	.nav-box{
		line-height: 50px;
		.publicnav{
			margin: 10px 0;
			h3{
				line-height: 30px;
				width: 150px;
				text-indent: 10px;
				&::after{
					border-width: 5px;
					border-bottom-width: 0;
				}
			}
			button{
				line-height: 28px;
				width: 100px;
			}
			ul li{
				line-height: 30px;
				width: 150px;
				a{
					text-indent: 10px;
				}
			}
		}
	}
	
	.jion-sales .swiper-slide .list{
		padding: 20px;
	}
	
	.search-box2{
		.search input{
			width: 65%;
		}
		.year{
			&::after{
				width: 100%;
			}
			span{
				display: block;
			}
		}
	}
	
	.news .box .list .img-box img{
		position: static;
		left: unset;
		top: unset;
		transform: none;
	}
	
	
	
	.booking-content .from-bg{
		height: 500px;
	}
	
	
	.bd_swiper > .swiper-container .swiper-slide{
		height: 500px;
	}
	
	.year_swiper .swiper-slide{
		width: 50%;
	}
	
	
	.rdc{
		margin: 10px auto;
	}
	
	
	.major{
		padding: 20px 0;
	}
	
	.major h3, .platform h3, .news2 h3{
		font-size: 20px;
		margin-bottom: 20px;
	}
	
	.platform {
		padding: 20px 0;
	}
	
	.news2{
		padding-top: 20px;
	}
	
	.pro .pro-list .list-box{
		.list{
			width: 100%;
			a{
				
			}
		}
	}
	
	.recommend .list .img_box {
	    height: 60vw;
		padding: 10px;
	}
	
}

@media screen and (min-width: 1680px){
	.index-news .inews .index-news-list .index-news-box{
		&:hover{
			margin-left: 20px;
			&::before{
				left: -140px;
				opacity: 1;
			}
			.day{
				p,em{
					color: $blue;
				}
			}
			em{
				&::after{
					background-color: $blue;
				}
			}
			.text{
				border-left: 1px solid $blue;
				h4{
					color: $blue;
				}
			}
		}
	}
}

@media screen and (min-width: 767px){
	.index-pro-nav ul li.ipro-navli{
		&::after,&::before{
			content: "";
			width: 0;
			height: 2px;
			background-color: $blue;
			position: absolute;
			bottom: 0;
			-webkit-transition: all 0.5s ease 0s;
			-moz-transition: all 0.5s ease 0s;
			-ms-transition: all 0.5s ease 0s;
			-o-transition: all 0.5s ease 0s;
			transition: all 0.5s ease 0s;
		}
		
		&::before{
			right: 0;
		}
		&::after{
			left: 0;
		}
		&:hover::after,&:hover::before,&.on::after,&.on::before{
			width: 50%;
		}
	}
}

.index-pro .ipro_slide .parhd .swiper-slide{
	font-size: 16px;
}
.font-size-14,
p{
	font-size: 14px;
	line-height: 24px;
}

@media screen and (max-width: 1680px){
	.text-box,.text {
		line-height: 32px;
	}
	h2.jion {
	    margin: 65px auto 40px;
	}
}

@media screen and (max-width: 1590px){
	.ins-tit span,
	.text-box,.text {
		font-size: 14px;
		line-height: 28px;
	}
	
	.index-pro-nav ul li.ipro-navli a{
		font-size: 14px;
	}
	
	.jion-lce h3,
	.platform .list .text-box h4,
	.major .list .text-box h4,
	.ins-img span,
	.font-size-24{
		font-size: 20px;
	}
	
	.year_swiper .swiper-slide.swiper-slide-active p,
	.third-select h2,
	.co-htit h3,
	.search-box2 h2,
	.ab-tit h3,
	.font-size-30{
		font-size: 24px;
	}
	
	.ab4 .main1 .box1 h4,
	.index-news .inews .index-news-list .index-news-box .day p,
	.index-case h3,
	.bd_swiper h3,
	.tag-box .list-box h4 i,
	.indTitle .tit,
	.font-size-36{
		font-size: 28px;
	}
	
	.tag-box .list-box h4{
		font-size: 18px;
	}
		
	.ins-tit h3{
		font-size: 36px;
	}
	
	.ins-img .text{
		font-size: 12px;
		line-height: 18px;
	}
	
	h2.jion {
	    margin: 50px auto 30px;
	}
}

@media screen and (max-width: 1200px){
	
	.tag-box .text{
		span {
		    font-size: 14px;
		    line-height: 24px;
		}
		p{
			font-size: 16px;
		}
	}
	
	.index-pro .idxOtab .idxOtab-li .swiper-slide .text-box p,
	.ins-tit span,
	.text-box,.text {
		font-size: 12px;
		line-height: 24px;
	}
	
	.jion-lce h3,
	.platform .list .text-box h4,
	.major .list .text-box h4,
	.ins-img span,
	.font-size-24{
		font-size: 18px;
	}
	
	.year_swiper .swiper-slide.swiper-slide-active p,
	.third-select h2,
	.co-htit h3,
	.search-box2 h2,
	.ab-tit h3,
	.font-size-30{
		font-size: 22px;
	}
	
	.ab4 .main1 .box1 h4,
	.index-news .inews .index-news-list .index-news-box .day p,
	.index-case h3,
	.bd_swiper h3,
	.tag-box .list-box h4 i,
	.indTitle .tit,
	.font-size-36{
	    font-size: 26px;
	}
	
	
	.tag-box .list-box h4{
		font-size: 16px;
	}
	h2.jion,
	.index-tit h2 {
		font-size: 20px;
		line-height: 32px;
	}
	.ins-tit h3{
		font-size: 32px;
		white-space: nowrap;
	}
	
	
}


@media screen and (max-width: 767px){
	.jion-lce h3,
	.platform .list .text-box h4,
	.major .list .text-box h4,
	.ins-img span,
	.font-size-24{
		font-size: 16px;
	}
	
	.year_swiper .swiper-slide.swiper-slide-active p,
	.third-select h2,
	.co-htit h3,
	.search-box2 h2,
	.ab-tit h3,
	.font-size-30{
		font-size: 16px;
	}
	
	.ab4 .main1 .box1 h4,
	.index-news .inews .index-news-list .index-news-box .day p,
	.index-case h3,
	.bd_swiper h3,
	.tag-box .list-box h4 i,
	.indTitle .tit,
	.font-size-36{
	    font-size: 20px;
	}
	
	.jion-lce .text-box p,
	.jion-brand p{
		font-size: 12px;
		line-height: 18px;
	}
	
	
	.tag-box .list-box h4{
		font-size: 12px;
	}
	.index-news .inews .index-news-list .index-news-box .text h4{
		font-size: 15px;
		line-height: 30px;
	}
	
	.index-pro .ipro_slide .parhd .swiper-slide,
	.index-case .casehd .swiper-container .swiper-slide p,
	.index-pro .idxOneSwiper ul.swiper-wrapper li.swiper-slide span,
	.index-pro-nav ul li.ipro-navli a{
		font-size: 12px;
	}
	
	.prov h3{
		padding-bottom: 0;
	}
	
	.prov h3,
	.prov-data h4,
	.prov-data h3,
	.recommend.rec-prov h3{
		font-size: 18px;
		line-height: 36px;
	}
	
	.search-box2 h2{
		font-size: 18px;
	}
	
	p,
	.font-size-14{
		font-size: 12px;
		line-height: 24px;
	}
	
	h2.jion,
	.index-tit h2 {
		font-size: 16px;
		line-height: 24px;
		p{
			font-size: 12px;
		}
	}
	
	.ins-tit h3{
		font-size: 24px;
	}
	
	.index-about-list .index-about-box .text h4{
		font-size: 14px;
	}
	
	.index-pro .idxOtab .idxOtab-li .swiper-slide .text-box h4{
		margin-bottom: 15px;
		font-size: 14px;
	}
	
	h2.jion {
	    margin: 35px auto 20px;
	}
	
	
}




.zhezhao{
	position: fixed;
	display: block;
	z-index: -1;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0);
	@include transition(.5s);
	&.on{
		z-index: 999;
		background-color: rgba(0,0,0,.33);
	}
}


/* login */
.login{
	display: block;
	position: fixed;
	top: 240px;
	width: 723px;
	height: 624px;
	padding: 0 80px;
	left: 50%;
	border-radius: 30px;
	transform: translateX(-50%) scale(0);
	background: #FFFFFF url('../images/login_bg.png') no-repeat center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	opacity: 0;
	z-index: -1;
	@include transition(.5s);
	&.on{
		opacity: 1;
		z-index: 999;
		transform: translateX(-50%) scale(1);
	}
	
	h2{
		font-size: 36px;
		padding-top: 60px;
		color: #0088f4;
		text-align: center;
		padding-bottom: 15px;
	}
	form{
		margin-top: 20px;
		p{
			position: relative;
			margin-bottom: 23px;
			background-position: 2% 50%;
			background-repeat: no-repeat;
			&:first-of-type{
				background-size: 28px 30px;
				background-image: url('../images/login01.png');
			}
			&:last-of-type{
				background-size: 24px 28px;
				background-image: url('../images/login02.png');
			}
			a{
				top: 50%;
				right: 0;
				width: 160px;
				height: 45px;
				color: #FFFFFF;
				font-size: 20px;
				line-height: 45px;
				text-align: center;
				border-radius: 3px;
				position: absolute;
				display: inline-block;
				background-color: #0088f4;
				transform: translateY(-50%);
				@include transition(.5s);
				&:hover{
					background-color: #0088f4 - #111111;
				}
				&:active{
					background-color: #0088f4;
				}
			}
		}
		input{
			width: 100%;
			font-size: 24px;
			line-height: 80px;
			text-indent: 10px;
			padding-left: 45px;
			box-sizing: border-box;
			background-color: rgba(255,255,255,0);
			border-bottom: 1px solid #e5e5e5;
			&::placeholder{
				color: #d7dee3;
				font-size: 24px;
				line-height: 48px;
			}
		}
		button{
			border: 0;
			width: 357px;
			height: 50px;
			color: #FFFFFF;
			display: block;
			cursor: pointer;
			font-size: 24px;
			margin: 60px auto;
			line-height: 50px;
			border-radius: 3px;
			background-color: #0088f4;
			@include transition(.5s);
			&:hover{
				background-color: #0088f4 - #111111;
			}
			&:active{
				background-color: #0088f4;
			}
		}
	}
	.other{
		text-align: center;
		a{
			color: #838383;
			margin: 0 40px;
			font-size: 16px;
			padding-top: 60px;
			display: inline-block;
			@include transition(.5s);
			&:nth-of-type(1){
				background: url('../images/icon37.png') no-repeat top center/47px 47px;
			}
			&:nth-of-type(2){
				background: url('../images/icon38.png') no-repeat top center/47px 47px;
			}
			&:hover{
				opacity: .7;
			}
		}
	}
}



@media (max-width:768px) {

	/* login */
	.login{
		left: 50%;
		position: fixed;
		height: auto;
		top: 50%;
		width: 90%;
		padding: 0 30px 30px;
		transform: translate(-50%,-50%);
		h2{
			font-size: 30px;
		}
		form{
			p{
				a{
					width: 30%;
					min-width: 90px;
					height: 45px;
					font-size: 16px;
					line-height: 45px;
				}
			}
			input{
				width: 100%;
				font-size: 16px;
				line-height: 60px;
				&::placeholder{
					color: #d7dee3;
					font-size: 16px;
					line-height: 30px;
				}
			}
			button{
				width: 70%;
				height: 50px;
				font-size: 16px;
				margin: 30px auto;
				line-height: 50px;
			}
		}
		.other{
			a{
				margin: 0 20px;
				font-size: 16px;
			}
		}
	}
}

.showroom{
	width: 100%;
	height: 1200px;
	position: relative;
	background: url('../images/rukou_bg01.jpg') no-repeat center/contain;
	
	.list-box{
		top: 35%;
		left: 50%;
		width: 860px;
		position: absolute;
		transform: translate(-50%,-50%);
		.list{
			float: left;
			margin: 0 10px;
			.img-box{
				width: 410px;
				height: 275px;
			}
			a{
				width: 100%;
				height: 100%;
				display: block;
				position: relative;
			}
			img{
				border-radius: 15px;
			}
			.inset{
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				border-radius: 15px;
				border: 3px solid #00fff6;
				box-shadow:inset 0px 0px 50px #00fff6;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				@include transition(.5s);
			}
			p{
				color: #00fff6;
				font-size: 28px;
				line-height: 48px;
				text-align: center;
			}
			&:hover{
				.inset{
					box-shadow:inset 0px 0px 0 #00fff6;
				}
			}
		}
	}
}
@media (max-width:1920px) {
	.showroom{
		background: url('../images/rukou_bg01.jpg') no-repeat center/cover;
	}
}

@media (max-width:991px) {
	.showroom{
		height: calc( 900 / 640 * 100vw );
		background: url('../images/rukou_bg02.jpg') no-repeat center/contain;
		.list-box{
			width: 100%;
			padding: 12.5%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			.list{
				margin: 0;
				padding: 0 10px;
				width: 50%;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				.img-box{
					width: 100%;
					height: unset;
				}
				img{
					top: unset;
					left: unset;
					position: unset;
					transform: unset;
				}
				p{
					font-size: 16px;
					white-space: nowrap;
				}
			}
		}
		
	}
	
	
}